<template>
    <el-dialog
      v-model="dialogVisible"
      :title="tips"
      width="500"
      :before-close="handleClose"
    >
        <el-checkbox style="margin-left: 30px" v-model="dataOnly">是否同时删除分组</el-checkbox>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
            </div>
        </template>
    </el-dialog>
  </template>

<script setup>
import { delIds } from "@/api/equipmentManagement/numberManage/grouping.api";
import useToggle from "@/hooks/useToggle";
const [loading, _, setLoading] = useToggle();
const [dialogVisible, changeDialogVisible, setDialogVisible] = useToggle();

const emit = defineEmits(['refresh'])

const dataOnly = ref(false)
const tips = ref('')
const idArr = ref([])

const init = (row, ids) => {
    dataOnly.value = false
    idArr.value = row.id ? [row.id] : ids.value
    tips.value = `确定删除${!row.id ? `${ids.value.length}条记录` : '这条记录'}?`;
    setDialogVisible(true)
    setLoading(false)
}

const handleClose = () => {
    setDialogVisible(false)
}

const submit = () => {
    setLoading(true)
    delIds({
        ids: idArr.value,
        dataOnly: !dataOnly.value
    }).then(() => {
        ElMessage.success('删除成功');
        setDialogVisible(false)
        emit('refresh')
    }).finally(() => {
        setDialogVisible(false)
        setLoading(false)
    })
}

defineExpose({
    init
})

</script>
